<template xmlns="http://www.w3.org/1999/html">
  <div id="lu" class="ip1">
    <el-container class="ip">
      <!-- 头部高度设为50px（默认60px） -->
      <el-header height="50px" style="">
        <!-- logo -->

        <a class="logo"><span class="log">销售管理系统</span></a>
        <!-- 折叠菜单按钮 -->
        <div class="toggle" @click="bing">
          <i class="el-icon-s-unfold" v-if="this.$root.isCollapse1"></i>
          <i class="el-icon-s-fold" v-if="!this.$root.isCollapse1"></i>
        </div>


        <!-- 下拉菜单 -->
        <el-dropdown>
              <span class="el-dropdown-link">
                <i class="el-icon-user el-icon--left"></i>
              </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="index" icon="el-icon-switch-button">
              注销
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

      </el-header>
      <el-container class="id">
        <!-- 菜单栏宽度设为自动 -->
        <el-aside width="auto">
          <el-menu
              :default-active="$router.path"
              router
              class="el-menu-vertical"
              background-color="#24314F"
              text-color="#fff"
              active-text-color="#6e81ad"
              :collapse="this.$root.isCollapse1">
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>商品管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/shopjia">商品添加</el-menu-item>
                <el-menu-item index="/shop">商品数据</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>员工管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/staffjia">员工添加</el-menu-item>
                <el-menu-item index="/staff">员工数据</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>客户管理</span>
              </template>
              <el-menu-item-group>

                <el-menu-item index="/customerjia">客户添加</el-menu-item>
                <el-menu-item index="/customer">客户数据</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>订单管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/salesorderjia">订单添加</el-menu-item>
                <el-menu-item index="/salesorder">订单数据</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="5">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>商品分类管理</span>
              </template>
              <el-menu-item-group>
                <!--             <template slot="title">分组一</template>  -->
                <el-menu-item index="/shopclassifyjia">类别添加</el-menu-item>
                <el-menu-item index="/shopclassify">商品类型数据</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-menu-item index="/userManege">
              <i class="el-icon-s-custom"></i>
              <span slot="title">用户管理</span>
            </el-menu-item>
            <el-menu-item index="/indexcustomer"
                          :route="{ path: this.url, query: { userId: this.userId ,role:this.role} }">
              <i class="el-icon-chat-line-round"></i>
              <span slot="title">在线聊天室</span>
            </el-menu-item>
              <el-menu-item index="/project">
                <i class="el-icon"></i>
                <span slot="title">自主设计流程图</span>
            </el-menu-item>
            <el-menu-item href="">
              <i class="el-icon-chat-line-round"></i>
              <a href="http://localhost:8888/swagger-ui.html">
              <span slot="title" style="color: #05f0f0">接口文档</span></a>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <!-- 可以结合vue-router路由嵌套实现页面的跳转与显示 -->
        <el-main>
          <router-view>
          </router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
window.onload = function () {

}
export default {

  components: {},
  data() {
    return {
      role: '',
      userId: '',
      url: "/indexcustomer",
      dialogVisible: false
    };
  },
  created() {
    this.getUserId()
    location.reload()
  },
  mounted() {
    this.$nextTick(() => {
      this.getUserId()
    })

  }, activated() {
    this.getUserId()
  },
  methods: {
    getUserId() {
      this.userId = this.$route.query.userId;
      this.role = this.$route.query.role;
      if ('0' === this.$route.query.role) {
        document.getElementById("lu").style.display = "none"
        this.$router.push({path: "/indexcustomer1", query: {userId: this.userId, role: '0'}})
      } else {

        document.getElementById("lu").style.display = ""
      }
    },

    index() {
      this.$router.push({path: '/'})
    },
    bing() {

      this.$root.isCollapse1 = !this.$root.isCollapse1

    }
  }
}
</script>

<style scoped>
.el-container {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  box-shadow: 0px 0px 10px #05f0f0;

}

/*上外边距50px，防止挡住Header*/
.el-aside, .el-main {
  margin-top: 40px;
}
span{
  color: #05f0f0;
}
/*设置背景色，方便观察效果*/
.el-header {
  box-shadow: 0px 0px 10px #05f0f0;

  background-color: #294582;

  /* 上层显示，避免被Main和Aside遮挡 */
  z-index: 10;
}

.el-aside {
  background-color: #24314F;
  box-shadow: 0px 0px 10px #05f0f0;;
}

.el-main {
  opacity: 1;
  filter: alpha(opacity=80);
  background-color: #091e4b;

}

/* 去除菜单右侧边框 */
.el-menu {
  border-right: none;
}

/* 设置展开时菜单宽度 */
.el-menu-vertical:not(.el-menu--collapse) {
  width: 230px;
}

/* logo */
.log {
  background-image: -webkit-linear-gradient(bottom, rgb(254, 255, 250), #faefe4, rgb(218, 218, 226));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: Tahoma, Geneva, sans-serif;
  border-radius: 5px 5px 5px 5px;
}

.ip {
  border: 5px solid #294582;

  /* width: 90%;
  left: 5%; */
}

.im {
  float: left;
  width: 60px;
  height: 60px;
  right: 20%;
}

.id {
  background-color: #6e81ad;
}

.logo {

  float: left;
  right: 40px;
  text-align: center;
  font-size: 23px;
  line-height: 50px;
  padding: 10 10px;
  font-weight: 800;
  text-decoration: none;
}

/* 折叠按钮 */
.toggle {
  color: rgb(109, 121, 169);
  text-align: center;
  font-size: 26px;
  line-height: 50px;
  display: inline-block;
  padding: 0 15px;
  border-left: solid px;
  position: absolute;
  left: 230px;
  cursor: pointer;
}

.toggle:hover {
  background-color: #ffd04b;
}

/* 下拉菜单 */
.el-dropdown {
  color: #fff;
  text-align: center;
  font-size: 26px;
  line-height: 50px;
  float: right;
}

.msg-box {
  width: 70%;
  height: 75%;
}

.dialog {
  height: 85%;
}
</style>
